<template>
  <ul :class="$style.container">
    <li 
      v-for="(item,idx) in lists" 
      :key="'comment'+idx">
      <div :class="$style.f1">
        <img 
          v-lazy="$api.prefix + item.avatar" 
          v-if="item.avatar">
        <img 
          v-else 
          src="//img.mukewang.com//54584d1d00015c0b02200220.jpg">
        <span :class="$style.username">{{ item.username }}</span>
        <span :class="$style.date">{{ formatTime(new Date(item.createdAt)) }}</span>
        <el-rate 
          :class="$style.star"
          v-model="item.star" 
          :max="10" 
          disabled/>
      </div>
      <h4>{{ item.title }}</h4>
      <p v-html="item.content"/>
      <div :class="$style.l1">
        <i 
          :class="item.zan.users.includes($store.state.user.user.userId+'') ? ['iconfont','icon-zan1',$style.icon, $style.active]: ['iconfont','icon-zan1',$style.icon]" 
          @click.stop="handleZanClick(item, 1)"> <span>有用 ({{ item.zan.count }})</span>
          <i 
            :class="item.noZan.users.includes($store.state.user.user.userId+'') ? ['iconfont','icon-buzan',$style.icon, $style.active]: ['iconfont','icon-buzan',$style.icon]" 
            @click.stop="handleZanClick(item, 2)"/><span>没用 ({{ item.noZan.count }})</span>
      </i></div>
    </li>
  </ul>
</template>

<script>
import http from '../../APIService/http'
export default {
  props: {
    lists: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  methods: {
    /**
     * 人性化时间处理 传入时间戳
     */
    formatTime(timestamp) {
      let mistiming =
        Math.round(new Date() / 1000) - Math.floor(timestamp / 1000)
      let arrr = ['年', '个月', '星期', '天', '小时', '分钟', '秒']
      let arrn = [31536000, 2592000, 604800, 86400, 3600, 60, 1]
      for (var i = 0; i < arrn.length; i++) {
        let inm = Math.floor(mistiming / arrn[i])
        if (inm != 0) {
          return inm + arrr[i] + '前'
        }
      }
    },
    /**
     * 点赞和吐槽
     */
    async handleZanClick(item, f) {
      let users = item.zan.users.concat(item.noZan.users)
      if (users.includes(this.$store.state.user.user.userId + '')) {
        return false
      }
      try {
        let params = {
          id: item._id
        }
        if (f === 1) {
          params.flag = 1
        } else if (f === 2) {
          params.flag = 2
        }
        let res = await http.post(`/comment/zan`, params)
        if (res.code === 0) {
          this.$emit('getCommentLists')
        }
      } catch (err) {}
    }
  }
}
</script>

<style lang='scss' module>
.container {
  margin-top: 50px;
  li {
    .f1 {
      font-size: 12px;
      img {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        vertical-align: middle;
      }
      .username {
        margin-right: 3px;
        font-weight: bold;
        color: #3d3d3d;
      }
      .date {
        margin-left: 7px;
        margin-right: 10px;
        color: #adadad;
      }
      .star {
        display: inline-block;
      }
    }
    h4 {
      margin: 5px 25px 0px 0px;
      font-weight: normal;
      height: 40px;
      line-height: 40px;
      color: #e36049;
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
    }
    p {
      font-size: 14px;
      color: #4b4b4b;
      line-height: 24px;
    }
    .l1 {
      padding-bottom: 20px;
      padding-top: 10px;
      height: 21px;
      span {
        color: #adadad;
        font-size: 12px;
      }
      .icon {
        vertical-align: middle;
        font-size: 20px;
        color: #adadad;
        cursor: pointer;
      }
      .active {
        color: #e36049;
      }
    }
  }
}
</style>
